<template>
  <div v-show="open">
    <el-alert
        title="恭喜，注册成功"
        type="success"
        description="点击注册下方的已有帐号，去登录"
        show-icon
    >
    </el-alert>
  </div>

  <div class="con">
    <div style="padding-bottom: 60px;font-weight: bolder;letter-spacing: 2px">
      用户注册
    </div>
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        label-position="left"
        class="demo-ruleForm"
        size="large"
    >
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="重复密码" prop="repassword">
        <el-input v-model="ruleForm.repassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-col :span="16">
          <el-input v-model="ruleForm.code"></el-input>
        </el-col>
        <el-col :span="8">
          <div style="height: 40px;padding-left: 5px">
            <el-image :src="img.img" class="el-img" @click="createCode"/>
          </div>
        </el-col>
      </el-form-item>
      <div class="register">
        <el-button type="primary" size="large"
                   class="btn"
                   :loading="loading"
                   @click="submitForm()">
          注册
        </el-button>
      </div>
      <div style="float: left;padding-top: 4px;">
        <el-link type="danger">*不记名账号，丢失无法找回</el-link>
      </div>
      <div class="to-login">
        <el-link type="primary" @click="toLogin()">已有帐号，去登录</el-link>
      </div>
    </el-form>
  </div>

</template>

<script>
import {get, post} from '../../request/request'
import {getCode, register} from "../../request/api";

export default {
  name: "Register",
  data() {
    const reCkPassword = (rule, value, callback) => {
      if (this.ruleForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    const ckCode = (rule, value, callback) => {
      if (this.img.value !== value) {
        callback(new Error("输入的验证码不正确"));
      } else {
        callback();
      }
    };
    return {
      img: {},
      ruleForm: {
        username: '',
        password: '',
        repassword: '',
        code: '',
        id: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur',},
          {min: 3, max: 10, message: '长度在 3 到 10之间', trigger: 'blur',},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur',},
          {max: 20, message: '超过最大长度', trigger: 'blur',},
        ],
        repassword: [
          {required: true, message: '请重复输入密码', trigger: 'blur',},
          {required: true, validator: reCkPassword, trigger: 'blur',},
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur',},
          {required: true, validator: ckCode, trigger: 'blur',},
        ],
      },
      loading: false,
      open: false
    }
  },
  created() {
    this.createCode()
  },
  methods: {
    toLogin() {
      this.$router.push("/login")
    },
    resetForm() {
      this.$refs.ruleFormRef.resetForm()
    },
    createCode() {
      get(getCode).then(res => {
            this.img = res.data
            this.ruleForm.id = res.data.id
          }
      )
    },
    submitForm() {
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          this.loading = true
          post(register, this.ruleForm).then(res => {
            this.loading = false
            this.open = true
          }).catch(() => {
            this.loading = false
            this.createCode()
          })
        } else {
          return false
        }
      })
    },
  }
}

</script>

<style scoped>
.con {
  align-items: center;
  text-align: center;
}

.el-img {
  height: 40px;
  width: 100%;
  border-radius: 4px;
}

.register {
  width: 100%;
  padding-top: 20px
}

.btn {
  width: 100%;
  letter-spacing: 10px;
  font-size: 14px;
  font-weight: bolder
}

.to-login {
  float: right;
  padding-top: 4px;
}


@media screen and (min-width: 320px) and (max-width: 767px) {
  .con {
    padding-top: 50px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .con {
    width: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .con {
    width: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .con {
    width: 40%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (min-width: 1920px) {
  .con {
    width: 40%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
